<script setup lang="ts">
  import { ref } from 'vue'

  const activeIndex = ref(0)

  // 当 swiper 下标发生变化时触发
  const onChange: UniHelper.SwiperOnChange = (ev) => {
    activeIndex.value = ev.detail.current
  }
  // 定义 props 接收
  defineProps<{
    list: BannerItem[]
  }>()

  /**
   *跳转页面
   * @param banner
   */
  const navigateTo = (bannerItem: BannerItem) => {
    if (bannerItem.type == 1) {
      uni.navigateTo({
        url: bannerItem.hrefUrl!
      })
    }
    else if (bannerItem.type == 2) {
      let htmPageUrl = bannerItem.hrefUrl
      htmPageUrl = encodeURIComponent(htmPageUrl!)
      let htmlPageTitle = bannerItem.name
      uni.navigateTo({
        url: `/pages/webView/webView?htmlPageTitle=${htmlPageTitle}&htmPageUrl=${htmPageUrl}`
      })
    }
  }
</script>

<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="false" :interval="3000" @change="onChange">
      <swiper-item v-for="item in list" :key="item.id">
        <image mode="aspectFill" class="image" :src="item.imgUrl" @tap="navigateTo(item)"></image>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text v-for="(item, index) in list" :key="item.id" class="dot" :class="{ active: index === activeIndex }"></text>
    </view>
  </view>
</template>

<style lang="scss">

  /* 轮播图 */
  .carousel {
    height: 200rpx;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    background-color: #efefef;

    .indicator {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 16rpx;
      display: flex;
      justify-content: center;

      .dot {
        width: 30rpx;
        height: 6rpx;
        margin: 0 8rpx;
        border-radius: 6rpx;
        background-color: rgba(255, 255, 255, 0.4);
      }

      .active {
        background-color: #fff;
      }
    }

    .navigator,
    .image {
      width: 100%;
      height: 100%;
    }
  }
</style>
